<html>
	<head>
		<title>Advanced Search</title>		
		<link rel="stylesheet" href="css/metro-bootstrap.css">			
		<script src="js/jquery/jquery.min.js"></script>		
		<script src="js/jquery/jquery.widget.min.js"></script>		
		<script src="js/metro/metro-input-control.js"></script>
		<script src="js/metro/metro-hint.js"></script>
		<script src="js/metro/metro-tab-control.js"></script>
		<script src="js/metro/metro-accordion.js"></script>
		<script src="js/metro/metro-calendar.js"></script>
		<script src="js/metro/metro-datepicker.js"></script>	
		<script src="js/metro/date-format.js"></script>
		<script src="js/jquery/html5shiv.min.js"></script>
		<script src="js/jquery/html5shiv.js"></script>
		<script src="js/jquery/respond.min.js"></script>
		<link rel="stylesheet" href="css/costum.css">	

	<script>
		//FONT RESIZING
		$(document).ready(function(){
		  // Reset Font Size
		  var originalFontSize = $('html').css('font-size');
			$(".resetFont").click(function(){
			$('html').css('font-size', originalFontSize);
		  });
		  // Increase Font Size
		  $(".increaseFont").click(function(){
			var currentFontSize = $('html').css('font-size');
			var currentFontSizeNum = parseFloat(currentFontSize, 10);
			var newFontSize = currentFontSizeNum*1.2;
			$('html').css('font-size', newFontSize);
			return false;
		  });
		  // Decrease Font Size
		  $(".decreaseFont").click(function(){
			var currentFontSize = $('html').css('font-size');
			var currentFontSizeNum = parseFloat(currentFontSize, 10);
			var newFontSize = currentFontSizeNum*0.8;
			$('html').css('font-size', newFontSize);
			return false;
		  });
		});

	</script>		
	</head>
	
	<body class="metro">
	<div class="grid container fluid">
		<!-- START HEADER -->
		<div class="row">
			<div class="span8 bg-white">
				<div class="padding20">
					<nav class="horizontal-menu">
							<li><a href="http://priawadi.blogspot.com">Home</a></li>
							<li><a href="http://priawadi.blogspot.com">FAQ</a></li>
							<li><a href="http://priawadi.blogspot.com">Feedback</a></li>
							<li><a href="http://priawadi.blogspot.com">Contact Us</a></li>
							<h2><strong>ELECTRONIC LABOR EXCHANGE</strong><h2>
							<img src="images\logoMoha.png" class="span10">
					</nav>						        
				</div>
			</div>
			
			<div class="span4">
				<div class="row">
				<button class="success span4 offset3">EMPLOYER</button>
				<button>JOBSEEKER</button><br/>
				<!-- 
					   <div class="tab-control" data-role="tab-control">
							<ul class="tabs">
								<li class="active"><a href="#_page_1">EMPLOYER</a></li>
								<li><a href="#_page_2">JOBSEEKER</a></li>
							</ul>						 
						</div>
				-->		
				<small>Welcome <strong><a href="">Jobseeker88</a></strong></small>,
				<small><button class="button warning mini"><span class="icon-user-2"></span>Login</button></small>
				<small><button class="button warning mini"><span class="icon-user-3"></span>Register</button></small>
				<br/>
				<small class="offset6"><a href="">Forgot Password</a></small>
				<img src="images\logoBrunei.png" class="span4 offset7"><br/><br/>
				</div>
			
								<!-- Text Resizing -->
						<div id="changeFont">
							<strong><a href="#" class="increaseFont">A+</a></strong>
							<strong><a href="#" class="resetFont">A</a></strong>
							<strong><a href="#" class="decreaseFont">A-</a></strong>
						</div>
			
						<div class="search">
							<form>
								<div class="input-control text">
								<a href=""><img src="images\search.png"></a>
									<input type="text" class="span10" placeholder="Search...">
								</div>
							</form>
						</div>
			   
				
			</div>			
		</div>
			
		<!-- Menu -->
		<div class="row">
			<ul id="menu">
				<li id="job"><a href=""></a></li>
				<li id="training"><a href=""></a></li>
				<li id="events"><a href=""></a></li>
				<li id="gallery"><a href=""></a></li>
				<li id="chat"><a href=""></a></li>
			</ul>
		</div>
		
		<!-- END HEADER-->
		
	<!-- START CONTENT-->	
					
	
		<!-- START ADVANCED SEARCH-->
		<div class="row">
		<nav class="breadcrumbs">
			<ul>
				<li><a href="#"><i class="icon-home"></i></a></li>
				<li><a href="#">Home</a></li>
				<li class="active"><a href="#">Advanced Search</a></li>
			</ul>
		</nav>			
		</div>
								
		<div class="row">
		<form class="clearfix">
			<legend>Advanced Search</legend>
			<label>Keyword(s)</label>
			<div class="input-control text span4 block" data-role="input-control">
				<input type="text" placeholder="Keyword(s)">
			</div>
							
			<label>Search</label>
			<div class="input-control radio margin10" data-role="input-control">
				<label>
					Position
					<input type="radio" name="position" checked />
					<span class="check"></span>
				</label>
			</div>
			<div class="input-control radio margin10" data-role="input-control">
				<label>
					Company
					<input type="radio" name="company" />
					<span class="check"></span>
				</label>
			</div>
			<div class="input-control radio margin10" data-role="input-control">
				<label>
					All Text
					<input type="radio" name="all text" />
					<span class="check"></span>
				</label>
			</div>									
			
			<label>Job Function</label>
			<div class="input-control select span4">
				<select>
					<option>--All Job Function--</option>
					<option>Accounting</option>
					<option>Admin HR</option>
				</select>
			</div><br/><br/>
			
			<label>Qualification</label>
			<div class="input-control select span4">
				<select>
					<option>----</option>
					<option>PHD</option>
					<option>Doctorate</option>
				</select>
			</div>
			<div class="input-control select span4">
				<select>
					<option>----</option>
					<option>PHD</option>
					<option>Doctorate</option>
				</select>
			</div>	
			<div class="input-control checkbox" data-role="input-control">
				<label>
					<input type="checkbox" checked="">
					<span class="check"></span>
					Include NOT Specified
				</label>
			</div>
			
			<label>Yr(s) of Experience</label>
			<div class="input-control select span4">
				<select>
					<option>----</option>
					<option>PHD</option>
					<option>Doctorate</option>
				</select>
			</div>
			<div class="input-control select span4">
				<select>
					<option>----</option>
					<option>PHD</option>
					<option>Doctorate</option>
				</select>
			</div>	
			<div class="input-control checkbox" data-role="input-control">
				<label>
					<input type="checkbox" checked="">
					<span class="check"></span>
					Include NOT Specified
				</label>
			</div>

			<label>Salary Range</label>
			<div class="input-control select span4">
				<select>
					<option>----</option>
					<option>PHD</option>
					<option>Doctorate</option>
				</select>
			</div>
			<div class="input-control select span4">
				<select>
					<option>----</option>
					<option>PHD</option>
					<option>Doctorate</option>
				</select>
			</div>	
			<div class="input-control checkbox" data-role="input-control">
				<label>
					<input type="checkbox" checked="">
					<span class="check"></span>
					Include NOT Specified
				</label>
			</div>

			<label>Career Level</label>
			<div class="input-control checkbox margin10" data-role="input-control">
				<label>
					<input type="checkbox">
					<span class="check"></span>
					Entry Level
				</label>
			</div>

			<div class="input-control checkbox margin10" data-role="input-control">
				<label>
					<input type="checkbox">
					<span class="check"></span>
					Middle
				</label>
			</div>

			<div class="input-control checkbox margin10" data-role="input-control">
				<label>
					<input type="checkbox">
					<span class="check"></span>
					Senior
				</label>
			</div>									

			<div class="input-control checkbox margin10" data-role="input-control">
				<label>
					<input type="checkbox">
					<span class="check"></span>
					Top
				</label>
			</div>
			
			<label>Employment Type</label>
			<div class="input-control checkbox margin10" data-role="input-control">
				<label>
					<input type="checkbox">
					<span class="check"></span>
					Full Time
				</label>
			</div>

			<div class="input-control checkbox margin10" data-role="input-control">
				<label>
					<input type="checkbox">
					<span class="check"></span>
					Part Time
				</label>
			</div>

			<div class="input-control checkbox margin10" data-role="input-control">
				<label>
					<input type="checkbox">
					<span class="check"></span>
					Permanent
				</label>
			</div>									

			<div class="input-control checkbox margin10" data-role="input-control">
				<label>
					<input type="checkbox">
					<span class="check"></span>
					Temporary
				</label>
			</div>									

			<div class="input-control checkbox margin10" data-role="input-control">
				<label>
					<input type="checkbox">
					<span class="check"></span>
					Contract
				</label>
			</div>	

			<div class="input-control checkbox margin10" data-role="input-control">
				<label>
					<input type="checkbox">
					<span class="check"></span>
					Freelance
				</label>
			</div>	

			<label>Job Reference Number</label>
			<div class="input-control text span4 block" data-role="input-control">
				<input type="text" placeholder="Job Reference Number">
			</div>

			<label>Job Posted Within</label>
			<div class="input-control select span4">
				<select>
					<option>One Day</option>
					<option>One Week</option>
					<option>Two Week</option>
				</select>
			</div><br/><br/>

			<label>Date Posted</label>
			<div class="input-control text span4" data-role="datepicker">
				<input type="text">
				<button class="btn-date"></button>
			</div><br/><br/>							
			
			<label>Number of Jobs per page</label>
			<div class="input-control select span4">
				<select>
					<option>20</option>
					<option>50</option>
					<option>100</option>
				</select>
			</div><br/><br/>
		</form>			
			
			<button type="submit" onclick="location.href='search-result.html'" class="info">Search</button>
		
		</div>
	<!-- END ADVANCED SEARCH-->
	<!-- END CONTENT -->
	
	<!-- START FOOTER -->
		<div class="row">		
			<div class="bg-dark">
				<div class="container">
					<div class="grid no-margin">
						<div class="row no-margin pad30">					
								<div class="span3">
								<img src="images\job_post.png">
								<a href="" class="bottom">Find a Job</a><br>
								<a href="" class="bottom">Search Vacancy</a><br>
								<a href="" class="bottom">Latest Jobs</a>
								</div>
								<div class="span3">
								<img src="images\job_seekers.png">						
								<a href="" class="bottom">Register Job Seeker</a><br>
								<a href="" class="bottom">Job Seeker Login</a><br>
								</div>
								<div class="span3">
								<img src="images\employers.png">
								<a href="" class="bottom">Register an Employer</a><br>
								<a href="" class="bottom">Search Employers</a><br>
								<a href="" class="bottom">Employer Login</a>
								</div>
									
						</div>
					</div>
				</div>
			</div>
		</div>
	<!-- END FOOTER -->	
	</div>
	<div id="footer" class="row">
    Copyright © 2013 ELX. All Rights Reserved
	</div>
	</body>
</html>